import React, {Component, Children, cloneElement, Fragment} from 'react'
import {Modal, Form, Input, DatePicker, Button, Spin, message} from 'antd'
import {moment, http} from '../../common/js/utils'
import {TagEdit} from '../tag_edit'
import propTypes from 'prop-types'

const FormItem = Form.Item
const {MonthPicker} = DatePicker

@Form.create()
class MovieEdit extends Component {

  state = {
    visible: false,
    loading: false
  }

  show = () => {
    const {resetFields} = this.props.form
    const {detail} = this.props
    this.setState({
      visible: true,
      tags: detail.tags
    })
    resetFields()
  }
  close = () => {
    this.setState({visible: false})
  }
  handleSubmit = e => {
    e.preventDefault()
    const {onSuccess, detail} = this.props
    this.props.form.validateFields((err, values) => {
      if (!err) {
        values._id = detail._id
        http({
          url: '/api/movies/edit',
          method: 'post',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: JSON.stringify(values)
        }, loading => this.setState({loading})).then(res => {
          if (res.result === 1) {
            this.close()
            onSuccess()
            message.success('修改成功')
          }
        })
      }
    })
  }

  componentWillMount() {}

  render() {
    const {children, detail} = this.props
    const {getFieldDecorator} = this.props.form
    const {loading} = this.state

    return (
      <Fragment>
        {
          Children.map(children, child => (
            cloneElement(child, {onClick: e => this.show()})
          ))
        }
        <Modal
          width={750}
          title={detail.title}
          visible={this.state.visible}
          footer={null}
          maskClosable={false}
          onCancel={this.close}
        >
          <Spin
            spinning={loading}
          >
            <Form
              layout="inline"
              labelCol={{span: 4, offset: 0}}
              wrapperCol={{span: 20, offset: 0}}
              onSubmit={this.handleSubmit}
            >
              <FormItem
                style={{width: '100%'}}
                label="电影名"
              >
                {getFieldDecorator('title', {
                  initialValue: detail.title,
                  rules: [{
                    required: true,
                    message: '电影名'
                  }, {
                    validator(rule, value, callback) {
                      if (!value) return callback()
                      if (value.length <= 30) {
                        callback()
                      } else {
                        callback(new Error('电影名过长'))
                      }
                    }
                  }]
                })(
                  <Input placeholder="请输入电影名" />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="海报"
              >
                {getFieldDecorator('poster', {
                  initialValue: detail.poster,
                  rules: [{
                    required: true,
                    message: '请输入海报地址'
                  }, {
                    validator(rule, value, callback) {
                      if (!value) return callback()
                      if (/^http(s?)/.test(value)) {
                        callback()
                      } else {
                        callback(new Error('请输入正确的海报地址'))
                      }
                    }
                  }]
                })(
                  <Input placeholder="请输入海报地址" />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="视频封面"
              >
                {getFieldDecorator('cover', {
                  initialValue: detail.cover,
                  rules: [{
                    required: false,
                    message: '请输入视频封面图'
                  }, {
                    validator(rule, value, callback) {
                      if (!value) return callback()
                      if (/^http(s?)/.test(value)) {
                        callback()
                      } else {
                        callback(new Error('请输入正确的视频封面图地址'))
                      }
                    }
                  }]
                })(
                  <Input placeholder="请输入视频封面图地址" />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="播放地址"
              >
                {getFieldDecorator('video', {
                  initialValue: detail.video,
                  rules: [{
                    required: true,
                    message: '请输入视频播放地址'
                  }, {
                    validator(rule, value, callback) {
                      if (!value) return callback()
                      if (/^http(s?)/.test(value)) {
                        callback()
                      } else {
                        callback(new Error('请输入正确的视频播放地址'))
                      }
                    }
                  }]
                })(
                  <Input placeholder="请输入视频播放地址" />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="简介"
              >
                {getFieldDecorator('summary', {
                  initialValue: detail.summary,
                  rules: [{
                    required: true,
                    message: '请输入视频简介'
                  }, {
                    validator(rule, value, callback) {
                      if (!value) return callback()
                      if (value.length <= 1000) {
                        callback()
                      } else {
                        callback(new Error('简介过长'))
                      }
                    }
                  }]
                })(
                  <Input.TextArea rows={8} placeholder="请输入视频简介" />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="类型"
              >
                {getFieldDecorator('movieTypes', {
                  initialValue: detail.movieTypes
                })(
                  <TagEdit />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="标签"
              >
                {getFieldDecorator('tags', {
                  initialValue: detail.tags
                })(
                  <TagEdit />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="演员"
              >
                {getFieldDecorator('casts', {
                  initialValue: detail.casts
                })(
                  <TagEdit />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="导演"
              >
                {getFieldDecorator('directors', {
                  initialValue: detail.directors
                })(
                  <TagEdit />
                )}
              </FormItem>
              <FormItem
                style={{width: '100%'}}
                label="上映时间"
              >
                {getFieldDecorator('pubdate', {
                  initialValue: moment(detail.pubdate)
                })(
                  <MonthPicker />
                )}
              </FormItem>
              <Form.Item
                wrapperCol={{span: 24, offset: 0}}
                style={{
                  width: '100%',
                  textAlign: 'right'
                }}
              >
                <Button type="primary" htmlType="submit">确定</Button>
                <Button style={{marginLeft: 10}} onClick={this.close}>取消</Button>
              </Form.Item>
            </Form>
          </Spin>
        </Modal>
      </Fragment>
    )
  }
}

MovieEdit.propTypes = {
  detail: propTypes.object,
  onSuccess: propTypes.func
}
MovieEdit.defaultProps = {
  detail: {},
  onSuccess: () => {}
}

export {MovieEdit}
